<template>
  <div class="flex justify-center" style="z-index: 9999;">
    <div class="custom-loader"></div>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
  .custom-loader {
    position: relative;
    width: 48px;
    height: 48px;
    color: #90cf5b;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
  }

  .custom-loader::after,
  .custom-loader::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: scale(0.5) translate(0, 0);
    background-color: #00afee;
    border-radius: 50%;
    -webkit-animation: scale2 1s infinite ease-in-out;
    animation: scale2 1s infinite ease-in-out;
  }

  .custom-loader::before {
    background-color: #90cf5b;
    transform: scale(0.5) translate(-48px, -48px);
  }
</style>
